<template>
	<view class="find-password-wrapper">
		<custom-header-bar title="忘记密码" backStatus="1"></custom-header-bar>
		<div class="content-box">
			<u--form class="form-wrapper" :model="form" :rules="rules" labelPosition="top" labelWidth="300"
				:labelStyle="{fontSize:'16px'}" ref="form">
				<u-form-item required label="用户姓名" borderBottom ref="item1" prop="uname">
					<div class="item">
						<u--input v-model="form.uname" border="none" placeholder="请输入"></u--input>
					</div>
				</u-form-item>
				<!-- <u-form-item required label="用户生日" borderBottom ref="item1" prop="birthData">
					<div class="item">
						<u--input v-model="form.birthData" border="none" placeholder="请输入"></u--input>
					</div>
				</u-form-item> -->
				<u-form-item required label="用户本人手机号" borderBottom ref="item1" prop="uphone">
					<div class="item">
						<u--input v-model="form.uphone" border="none" placeholder="请输入"></u--input>
					</div>
				</u-form-item>
			</u--form>
			<u-action-sheet :show="showQuestion" :actions="actions" title="请选择问题" @close="showQuestion = false"
				@select="sexSelect">
			</u-action-sheet>
			<div class="submit-wrapepr">
				<button class="button active" @click="findPassword" type="default">找回密码</button>
			</div>
		</div>
	</view>
</template>

<script>
	import CustomHeaderBar from "@/components/custom-header-bar.vue"
	import {
		ChangeDensity
	} from '@/api/login.js'
	export default {
		components: {
			CustomHeaderBar
		},
		data() {
			return {
				showQuestion: false,
				form: {
					uname: '',
					uphone: '',
					// birthData: ''
				},
				question: '用户姓名',
				actions: [{
						name: '用户姓名',
					},
					{
						name: '用户生日',
					},
					{
						name: '用户本人手机号',
					},
				],
				rules: {
					uname: {
						type: 'string',
						required: true,
						message: '请填写用户姓名',
						trigger: ['blur']
					},
					birthData: {
						type: 'string',
						required: true,
						message: '请填写用户生日',
						trigger: ['blur']
					},
					uphone: {
						type: 'string',
						required: true,
						message: '请填写用户本人手机号',
						trigger: ['blur']
					}
				}

			}
		},
		methods: {
			sexSelect(e) {
				this.question = e.name
			},
			// 确定
			findPassword() {
				this.$refs.form.validate().then(res => {
					ChangeDensity(this.form).then(res => {
						if (res.data.code === 200) {
							uni.redirectTo({
								url: "/pages/moduleLogin/find-password/find-password-result"
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				}).catch(errors => {})
				
				// if(this.answer==='111111'){

				// }else{
				// 	uni.showToast({
				// 		title:'答案错误'
				// 	})
				// }
			},
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			redirectTo(url) {
				uni.redirectTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/utils/variable.scss';

	.find-password-wrapper {
		height: 100vh;
		background: linear-gradient(-36deg, rgba(129, 216, 207, 0.73), rgba(100, 201, 191, 0.73));
		padding: 160upx 50upx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.content-box {
			height: calc(100vh - 200upx);
			background-color: rgba(255, 255, 255, .65);
			border-radius: 24upx;
			padding: 80upx 48upx;
			box-sizing: border-box;

			.form-wrapper {
				.item {
					flex: 1;
					height: 64upx;
					line-height: 64upx;
					display: flex;
					padding: 0 24upx;
					border-radius: 8upx;

					.text {
						flex: 1;
					}
				}
			}
		}

		.submit-wrapepr {
			margin-top: 30vh;

			.button {
				color: rgba(186, 193, 192, 1);
				background: rgba(219, 231, 230, 1);
				letter-spacing: 8upx;
				height: 84upx;
				line-height: 84upx;
				font-size: 32upx;

				&.active {
					color: #ffffff;
					background: linear-gradient(-36deg, rgba(114, 215, 204, 0.6), rgba(40, 207, 179, 0.6));
					box-shadow: 0upx 7upx 14upx 1upx rgba(129, 216, 207, 0.41);
					border-radius: 18upx;
				}

				&:after {
					border: none
				}
			}
		}
	}
</style>
